import React, { Component } from 'react';
import Swiper from 'react-native-swiper';
import { AppRegistry, Text, TextInput, View ,FlatList,TouchableOpacity,Image,Dimensions,ScrollView,TouchableHighlight} from 'react-native';
var {height, width} = Dimensions.get('window');
import ScrollableTabView,{DefaultTabBar,ScrollableTabBar}  from 'react-native-scrollable-tab-view';
export default class Cangpinguan extends Component {
  constructor(props) {
    super(props);
    navigation = props.navigation; 
    this.state = {
        dataSource:[
            {'id':1,'name':"营造之道-紫禁城建筑艺术展",'shidai':"常设",'zuozhe':"故宫·学术",'jianjie':"办“故宫藏传佛教文物精品展”一期（2011年）、二期（2013年），受到业内外人士的普遍好评"},
            {'id':2,'name':"营造之道-紫禁城建筑艺术展",'shidai':"原状",'zuozhe':"故宫·学术",'jianjie':"办“故宫藏传佛教文物精品展”一期（2011年）、二期（2013年），受到业内外人士的普遍好评"},
            {'id':3,'name':"营造之道-紫禁城建筑艺术展",'shidai':"赴外",'zuozhe':"故宫·学术",'jianjie':"办“故宫藏传佛教文物精品展”一期（2011年）、二期（2013年），受到业内外人士的普遍好评"},
            {'id':4,'name':"营造之道-紫禁城建筑艺术展",'shidai':"常设",'zuozhe':"故宫·学术",'jianjie':"办“故宫藏传佛教文物精品展”一期（2011年）、二期（2013年），受到业内外人士的普遍好评"},
        ],
        tabs:1,

    };
  }
    static navigationOptions=({navigation}) => ({
        headerTitle: '学术详情',
        headerTitleStyle:{
            alignSelf:'center',
            // width:width
        },
        headerTintColor:'burlywood',
        
      });
      _keyExtractor = (item, index) => item.id;
      _renderItem({item,index}){//古籍
        const { navigate } = this.props.navigation;
          return(
            <View style={{flex:1}}>
            <TouchableOpacity onPress={() => navigate('ProfileD')} activeOpacity={0.3} style={{flex:1}}>
            <View style={{width:width*0.9,height:65,paddingTop:10, flexDirection: 'column',justifyContent: 'flex-start',alignSelf:'center',marginBottom:10}}>
                <View style={{flexDirection:'column',justifyContent:'flex-start',paddingLeft:10}}>
                <Text style={{}}> {item.name}</Text>
                <Text style={{marginTop:5,paddingLeft:5}}>{item.shidai}</Text>
                </View>
                <View style={{width:width*0.9,height:1,backgroundColor:'#CCCCCC',marginTop:20}}>
                </View>
            </View>
            </TouchableOpacity>
            </View>
          )
      };
      _renderItem1({item,index}){//出版物，在线
        const { navigate } = this.props.navigation;
          return(
            
            <TouchableOpacity onPress={() => navigate('ProfileD')} activeOpacity={0.3} style={{width:width,paddingLeft:width*0.05,marginTop:10}}>
            <View style={{width:width*0.9,flex: 1,textAlign:'center'}}>
                <View style={{flexDirection:'row',justifyContent: 'flex-start'}}>
                <Image style={{width:width*0.4,height:width*0.4}} source={require("./img/day1.png")}></Image>
                <Text style={{flex:1,textAlign:'left',paddingLeft:10,flexDirection: 'column',alignSelf: 'center'}}> {item.name}</Text>
                </View>
            </View>
            </TouchableOpacity>
           
          )
      };
render() {
  const { navigate } = this.props.navigation;
        return (
        <ScrollableTabView
        style={{backgroundColor:'white'}}
        tabBarPosition='top'//tabBarPosition默认top  位于屏幕顶部   bottom位于屏幕底部  overlayTop悬浮在顶部
        initialPage={0} //初始化时被选中的Tab下标，默认是0
        locked={false}//表示手指是否能拖动视图  默认false  true则不能拖动,只可点击
        renderTabBar={() => <DefaultTabBar />}
        tabBarUnderlineStyle={{backgroundColor: 'black',height:1}}//设置DefaultTabBar和ScrollableTabBarTab选中时下方横线的颜色
        tabBarBackgroundColor='#FFFFFF'//设置整个Tab这一栏的背景颜色
        tabBarActiveTextColor='black'//设置选中Tab的文字颜色
        tabBarInactiveTextColor='#CCCCCC'//设置未选中Tab的文字颜色
        tabBarTextStyle={{fontSize: 16,fontWeight:'',paddingTop:8}}//设置Tab文字的样式
        onChangeTab={(obj) => {//Tab切换之后会触发此方法
          console.log('index:' + obj.i);
        }}
        onScroll={(postion) => {  //视图正在滑动的时候触发此方法
          // float类型 [0, tab数量-1]
          console.log('scroll position:' + postion);
        }}
    >
        <View tabLabel='古籍阅览' style={{backgroundColor:'white',flex:1}}>
            
            <Swiper height={100} showsButtons={false} autoplay={true}
              activeDot={<View style={{backgroundColor: 'rgba(255,255,255,0.8)', width: 8, height: 8, borderRadius: 4, marginLeft: 3, marginRight: 3, marginTop: 3, marginBottom: 3,}} />}>
              <TouchableHighlight onPress={() => navigate('ProfileD',{user:'行超'})}>
                <View style={{}}>
                <Image style={{}} source={require("./img/day1.png")}></Image>
                  <Text style={{}}>Day1: Timer</Text>
                </View>
              </TouchableHighlight>
              <TouchableHighlight onPress={() => navigate('ProfileD',{user:'行超'})}>
                <View style={{}}>
                <Image style={{}} source={require("./img/day2.png")}></Image>
                  <Text style={{}}>Day2: Weather</Text>
                </View>
              </TouchableHighlight>
              <TouchableHighlight onPress={() => navigate('ProfileD',{user:'行超'})}>
              <View style={{}}>
              <Image style={{}} source={require("./img/day1.png")}></Image>
                <Text style={{}}>Day2: Weather</Text>
              </View>
            </TouchableHighlight>
            <TouchableHighlight onPress={() => navigate('ProfileD',{user:'行超'})}>
            <View style={{}}>
            <Image style={{}} source={require("./img/day2.png")}></Image>
              <Text style={{}}>Day2: Weather</Text>
            </View>
          </TouchableHighlight>
          </Swiper>
          {/**/}
          <ScrollableTabView
          tabBarPosition='top'//tabBarPosition默认top  位于屏幕顶部   bottom位于屏幕底部  overlayTop悬浮在顶部
          initialPage={0} //初始化时被选中的Tab下标，默认是0
          locked={true}//表示手指是否能拖动视图  默认false  true则不能拖动,只可点击
          renderTabBar={() => <ScrollableTabBar />}
          tabBarUnderlineStyle={{backgroundColor: 'black'}}//设置DefaultTabBar和ScrollableTabBarTab选中时下方横线的颜色
          tabBarBackgroundColor='#FFFFFF'//设置整个Tab这一栏的背景颜色
          tabBarActiveTextColor='black'//设置选中Tab的文字颜色
          tabBarInactiveTextColor='#CCCCCC'//设置未选中Tab的文字颜色
          tabBarTextStyle={{fontSize: 16,fontWeight:''}}//设置Tab文字的样式
          onChangeTab={(obj) => {//Tab切换之后会触发此方法
            console.log('index:' + obj.i);
          }}
          onScroll={(postion) => {  //视图正在滑动的时候触发此方法
            // float类型 [0, tab数量-1]
            console.log('scroll position:' + postion);
          }}
      >
          <View tabLabel='武英殿刻本' style={{backgroundColor:'white',}}>
          <FlatList 
          data={this.state.dataSource}
          keyExtractor={this._keyExtractor}
          renderItem={this._renderItem.bind(this)}
          style={{}}>
          </FlatList>
          </View>
          <View tabLabel='元明清佳刻'>
          <FlatList 
          data={this.state.dataSource}
          keyExtractor={this._keyExtractor}
          renderItem={this._renderItem.bind(this)}>
          </FlatList>
          </View>
          <View tabLabel='明清抄本'>
          <FlatList 
          data={this.state.dataSource}
          keyExtractor={this._keyExtractor}
          renderItem={this._renderItem.bind(this)}>
          </FlatList>
          </View>
          <View tabLabel='地方志'>
          <FlatList 
          data={this.state.dataSource}
          keyExtractor={this._keyExtractor}
          renderItem={this._renderItem.bind(this)}>
          </FlatList>
          </View>
          <View tabLabel='宫中特藏'>
          <FlatList 
          data={this.state.dataSource}
          keyExtractor={this._keyExtractor}
          renderItem={this._renderItem.bind(this)}>
          </FlatList>
          </View>
      </ScrollableTabView>
        </View>
        <View tabLabel='出版物阅览'>
            <FlatList 
            data={this.state.dataSource}
            numColumns={1}
            keyExtractor={this._keyExtractor}
            renderItem={this._renderItem1.bind(this)}
            style={{marginTop:20,}}
            />
            
        </View>
        <View tabLabel='在线阅读'>
            <FlatList 
            data={this.state.dataSource}
            numColumns={1}
            keyExtractor={this._keyExtractor}
            renderItem={this._renderItem1.bind(this)}
            style={{marginTop:20,}}>
            </FlatList>
        </View>
    </ScrollableTabView>

         )
  
       
     }
}
